<template>
  <!-- 顶通栏组件 -->
  <div class="topbar">
    <div class="wrap topbar_Wrap">
      <!-- 左侧 -->
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <!-- 右侧 -->
      <ul class="right">
        <li>
          <img :src="useInfo.userInfo.headImg" class="active" alt="" />
          用户名:&nbsp;{{ useInfo.userInfo.nickName }}
        </li>
        <li>我的积分:&nbsp;{{ useInfo.userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li
          class="login_btn"
          v-show="!useLogin.isLoginEd"
          @click="useLogin.LoginModalShow(true)"
        >
          登录
        </li>
        <li class="cart-btn" v-show="useLogin.isLoginEd">
          <img src="@/assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ useInfo.carTotal }}</strong>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { userInfoStore } from "@/store/userInfo"; //用户信息=-pinina
import { useShowLoginStore } from "@/store/showLogin"; //登录框-pinia
import { WeiXinLogin } from "@/http/api";
const router = useRouter();
const route = useRoute();
const useInfo = userInfoStore();
const useLogin = useShowLoginStore();

// 等登录对象初始化完毕后 在获取参数
// 如果获取到了地址栏中的code，则表示准备进行扫码登录
let pathCode = route.query.code;
//向后端发起微信扫码登录请求
if (pathCode) {
  WeiXinLogin({ code: pathCode }).then((res) => {
    if (res.code == 0) {
      //扫码登录成功
      //1.提示登录成功
      alert("登录成功");
      //2.存储token
      localStorage.setItem("token", res["x-auth-token"]);
      //3.切换按钮(显示购物车按钮)
      useLogin.changeLoginEd(true);
      //4.清除地址栏中code(避免重复发送微信扫码登录请求)
      router.push(route.path);
      //5.更新用户信息
      useInfo.UserInfoList();
    } else if (res.code == 400) {
      //1 .二维码超时了
      alert("微信二维码失效了,请重新扫码");
      //2.自动代开登录模态框
      useLogin.LoginModalShow(true);
    } else if (res.code == 407) {
      // 当用户第一次使用微信扫码登录，并且没有绑定对应
      //1.提示用户需要绑定手机号码
      alert("请使用手机号在登陆一次");
      //2. 自动打开登录模态框
      useLogin.LoginModalShow(true);
      //3. 本地存储uuid(下一次手机号登录时使用到)
      localStorage.setItem("uuid", res.uuid);
      //4.清除地址栏中code(避免重复发送微信扫码登录请求)
      router.push(route.path);
    }
  });
} else {
  //判断本地是否存在token,存在表示已登录状态，反之未登录状态
  let token = localStorage.getItem("token");
  useLogin.changeLoginEd(Boolean(token));
  if (token) {
    //已登录
    useInfo.UserInfoList();
  } else {
    //未登录-还原pinia中userinfo的信息
    useInfo.initUserInfo();
  }
}
</script>

<style lang="less" scoped>
.topbar {
  font-family: SourceHanSansSC;
  font-size: 14px;
  font-weight: 300;
  height: 40px;
  color: #fff;
  background-color: #242b39;
  .topbar_Wrap {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    .right {
      display: flex;
      justify-content: space-between;
      li {
        margin-left: 20px;
        text-align: center;
        &.login_btn {
          width: 124px;
          background: #0a328e;
        }
        &.cart-btn {
          width: 124px;
          height: 40px;
          background: #0a328e;
          text-align: center;
          img {
            width: 20px;
            height: 19px;
            vertical-align: middle;
          }
          span {
            margin: 0 8px;
          }
          strong {
            width: 22px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            border-radius: 50%;
            background-color: #fd604d;
          }
        }
        .active {
          width: 26px;
          height: 26px;
          border-radius: 13px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
